<template>
    <div class="top">

        <div class="left">
            <router-link to="/weather">
                <i class="iconfont icon-chilun"></i>
                <span>新中地天气</span>
            </router-link>
        </div>

        <div class="text">
            <span class="city">{{ }}</span>
            <span class="weather">实时天气：℃</span>
            <span class="cloud">级</span>
        </div>

        <div class="right">
            <i class="iconfont icon-gantanhao"></i>
        </div>
    </div>


</template>

<script setup>
import { RouterLink } from "vue-router"
import { counter } from '@/stores/counter'
import { storeToRefs } from 'pinia'
import { onMounted, ref } from 'vue'


const weatherStore = counter();

onMounted(() => {
    weatherStore.getIpWeather();
});
</script>

<style scoped lang="scss">
.top {
    display: flex;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
    min-width: 1500px;
    height: 80px;
    line-height: 80px;
    gap: 20px;
    justify-content: center;

    .left {
        display: flex;
        color: white;
        font-size: 24px;
        margin-left: 50px;

        span {
            color: white;
        }

        i {
            font-size: 28px;
            padding-right: 10px;
            color: white;
        }
    }

    .text {
        color: white;
        padding: 0 10px;

    }

    .right {
        margin-left: 700px;

        i {
            color: white;
        }
    }
}
</style>